<template id="about_class">
  <div class="about">

    <div class="about_us">

      <!--头部-->
      <div class="about_header">

        <div class="about_title">
          <router-link to=""><img src="../../assets/images/class/jiantou_03.png"/></router-link>

          <p>约课上门</p>
          <div class="about_select">
            <div class="about_ing" @click='toggle()'><span></span><span></span><span></span></div>
            <div class="about_kile" v-show='dropdownActive'>
              <ul>
                <li @click.stop="hour"><img src="../../assets/images/class/yueke_03.png"/><span>按课时</span></li>
                <li @click.stop="range"><img src="../../assets/images/class/yueke_07.png"/><span>按距离</span></li>
                <li @click.stop="star"><img src="../../assets/images/class/yueke_11.png"/><span>按星级</span></li>
                <li @click.stop="opin"><img src="../../assets/images/class/yuyue_18.png"/><span>按好评数</span></li>
                <li @click.stop="Order"><img src="../../assets/images/class/yueke_20.png"/><span>按可预约</span></li>
                <li @click.stop="coach"><img src="../../assets/images/class/yueke_23.png"/><span>所有教练</span></li>

              </ul>
            </div>

          </div>

        </div>
      </div>
      <!--头部结束-->

      <!--地址/条件筛选教练/搜索教练-->

      <div class="about_most">

        <!--更改地址/条件筛选-->
        <div class="about_top">
          <div class="about_top_left">
            <img src="../../assets/images/class/icon_location.png"/>
            <span>{{ad}}</span>
            <span v-if=""></span>

          </div>
          <div class="about_top_right" @click.stop="address">
            <button @click.stop="addressChange">更改地址</button>

          </div>
        </div>
        <!--更改地址/条件筛选结束-->

        <!--搜索教练/请输入姓名和手机号-->
        <div class="about_bottom">
          <div class="about_bottom_left">
            <input type="text" name="" id="" placeholder="请输入教练姓名或手机号" @change="searchName"/>
          </div>
          <div class="about_bottom_right">
            <button @click.stop="searchCoach">搜索教练</button>
          </div>
        </div>
        <!--搜索教练/请输入姓名和手机号结束-->

      </div>

      <!--地址/条件筛选教练/搜索教练结束-->

    </div>

    <!--教练的信息-->
    <div class="about_info">
      <!--教练一-->
      <div class="about_coach" v-for="item in most">
        <div class="about_coach_kile" @click.stop="coachPage">

          <dl @click.stop="aboutCoach(item)">
            <dt><img :src="item.photo"/></dt>
            <dd>
              <!--姓名-->
              <div class="coach_name">
                <p>{{item.name}}</p>

              </div>
              <!--姓名结束-->
              <!--累计课时与粉丝数-->
              <div class="coach_hour">
                <div class="coach_left">
                  <div class="coach_xing">
                    <el-rate v-model="item.star" disabled></el-rate>
                  </div>
                  <div class="coach_total">累计课时:<span> {{item.class_count}}小时</span></div>
                </div>
                <div class="coach_right">{{item.distance}}m</div>

              </div>
              <!--累计课时与粉丝数结束-->
              <!--好评-->
              <div class="coach_dome">
                <div class="coach_jin">
                  <p>好评</p>
                  <span>{{item.good_rate}}</span>
                </div>
                <font></font>
                <div class="coach_made">
                  <p>粉丝数</p><span>{{item.thumbs_num}}</span><img src="../../assets/images/class/shou_14.png"/></div>
              </div>

              <!--今日可预约-->
              <div class="coach_data">
                <span style="color: #2d8f90;">{{item.isappointment==1 ? '今日可预约' : ''}}</span>
                <span>{{item.isappointment==0 ? '今日不可约' : ''}}</span>
                <p>两周内可预约{{item.appointmentcount}}天</p>
                <span></span>
              </div>
              <!--今日可预约结束-->

              <!--距离多少米-->
              <div class="coach_range">

                <div class="coach_min" v-for="(major, majorIndex) in item.major" :key="majorIndex">{{major}}</div>
              </div>
              <!--距离多少米结束-->

            </dd>
          </dl>

        </div>
      </div>
      <!--教练一结束-->

    </div>
    <!--教练的信息结束-->

  </div>
</template>
<script>
  import Vue from 'vue'

  export default {
    data() {
      return {
        value1: 2,
        searchInfoName: '',
        dropdownActive: false,
        most: [],
        newMost: [],
        num: 0,
        user: '',
        major: [],
        address: "",
        cookie: '',
        ad: '',
        numTop: '',
        nTop: '1',
        nTop2: '2',
        lng: '',
        lat: ''
      }
    },
    computed: {
      coachidInfo() {
        return this.$store.state.coachid;
      }
    },

    created() {
      let qs = require('qs');
      let cmap = this.getCookie();
      this.lng = window.localStorage.getItem('lng');
      this.lat = window.localStorage.getItem('lat');
      if (this.lng == null || this.lat == null||this.lng=="0"||this.lat=="0") {
        this.lng = 116.4;
        this.lat = 39.9;
      }
      let code = this.getQueryString("code");
      if (code != null) {
        let obj1 = {
          code:code
        }
        this.$axios.post("http://yogahome.top/Scanning/pay/getWxOpenid", qs.stringify(obj1), {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
          //重写headers 请求头  qs.stringify(json对象) 把对象转化为字符串
        }).then(function (response) {
          sessionStorage.setItem("openid",response.data.data);
        }).catch(function (error) {
          console.log(error);
        });
      }
      let obj = {
        //请求的参数
        code: 1,
        // lng: 116.4,
        // lat: 39.9,
        lng: this.lng,
        lat: this.lat,
        most: [],
        cookie: cmap

      };
      this.cookie = cmap;
      //console.log(this.cookie);
      let _this = this
      this.$axios.post("http://yogahome.top/yujia/user/findCoachByDistant", qs.stringify(obj), {
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        }
        //重写headers 请求头  qs.stringify(json对象) 把对象转化为字符串
      }).then(function (response) {

        for (let i = 0; i < response.data.data.length; i++) {
          if (!(response.data.data[i].major instanceof Array) && response.data.data[i].major) {
            response.data.data[i].major = response.data.data[i].major.split('|');
          }
        }
        // _this.newMost = _this.sliceArr(response.data.data, 30);
        // _this.most = _this.newMost[0];
        _this.most = response.data.data


      }).catch(function (error) {
        console.log(error);
      });
    },
    mounted() {
      this.getadd()
      this.getCookie()
      this.scrollHeight()
    },
    beforeUpdate() {
      this.scrollHeight()
      this.scrollGn()
    },
    methods: {
      scrollGn: function () {
        var _this = this
        setTimeout(() => {
          goPage(1, 80)
          var pageSize

          function goPage(pno, psize) {
            var num = $('.about_info').children().length
            var totalPage = 0;//总页数
            pageSize = psize;//每页显示行数
            //总共分几页
            if (num / pageSize > parseInt(num / pageSize)) {
              totalPage = parseInt(num / pageSize) + 1;
            } else {
              totalPage = parseInt(num / pageSize);
            }
            // console.log(totalPage+'总页数')
            var currentPage = pno;//当前页数
            var startRow = (currentPage - 1) * pageSize + 1;//开始显示的行  31
            var endRow = currentPage * pageSize;//结束显示的行
            endRow = (endRow > num) ? num : endRow;
            for (var i = 1; i < (num + 1); i++) {
              var irow = $('.about_info').children()[i - 1];
              if (i >= startRow && i <= endRow) {
                irow.style.display = "block";
              } else {
                irow.style.display = "none";
              }
            }
            //1页数据的高度
            // var OneHeight=Number($('.about_coach').height())*Number(pageSize)
            // console.log(Number(OneHeight))   // 1340 2660 4020
            // console.log(_this.numTop)
          }

          // console.log(pageSize)
          // $(window).scroll( function() {
          // 	_this.nTop2=_this.nTop
          // 	var numyshu=1;
          // 	if(_this.nTop >=80*100 || _this.nTop<=160*100){
          // 		numyshu++;
          // 		console.log(_this.nTop)
          // 		console.log(numyshu,numyshu*pageSize)
          // 	    setTimeout(() => {
          // 				goPage(2,80)
          // 			    console.log('===='+'ok')
          // 		}, 5000);
          // 	}
          //  } );
          $(window).scroll(function () {
            _this.nTop2 = _this.nTop
            console.log(_this.nTop2)

            if (_this.nTop2 > 7000 && _this.nTop2 < 11000) {
              // alert(1)
              // setTimeout(() => {
              goPage(2, 80)
              console.log('====' + 'ok1')
              // 	// }, 1);
            } else if (_this.nTop >= 11000 && _this.nTop <= 220 * 100) {
              setTimeout(() => {
                goPage(3, 80)
                console.log('====' + 'ok2')
              }, 1);
            }
          });
        }, 500);
      },
      scrollHeight: function () {
        setTimeout(() => {
          var _this = this;
          $(window).scroll(function () {
            // console.log($(document).scrollTop())     //2194
            _this.nTop = $(document).scrollTop()  // 1 1097  2 2547 3 3997
            console.log(_this.nTop)
          });
        }, 3000)
      },
      getadd: function () {
        var getadd = window.localStorage.getItem('add')
        this.ad = getadd.substring(6)
        //let SESSION_ID = JSON.parse(window.sessionStorage.getItem('SESSION_ID'));
        var SESSION_ID = JSON.parse(window.localStorage.getItem('sessiond'))
        //window.localStorage.setItem('sessionid',SESSION_ID.sessionid)

      },
      getQueryString(name) {
        let href = window.location.href;
        let param = href.split("?")[1];
        if(param==null){
          return null;
        }
        let allparam = param.split("&");
        let map = new Map();
        for(let i=0;i<allparam.length;i++){
          let key = allparam[i].split("=")[0];
          let value = allparam[i].split("=")[1];
          map.set(key,value);
        }
        if(map.get(name)!=null){
          return map.get(name);
        }else {
          return null;
        }
      },
      getCookie() {
        let map = new Map();
        let cookie = document.cookie.split(';');
        if (cookie == null || document.cookie == "") {
          map.set("city", "北京市");
          return map;
        }
        for (let i = 0; i < cookie.length; i++) {
          let key = cookie[i].split('=')[0].trim();
          let val = cookie[i].split('=')[1].trim();
          map.set(key, val);
        }
        return map;
      },
      sliceArr(most, len) {
        let a_len = most.length;
        let rulest = [];
        for (let i = 0; i < a_len; i += len) {
          rulest.push(most.slice(i, i + len));
        }
        return rulest;
      },
      toggle() {
        this.dropdownActive = !this.dropdownActive
      },
      //			按课时排序
      hour() {
        let obj = {
          //请求的参数
          coachid: 88891,
          code: 1,
          lng: this.lng,
          lat: this.lat,

        };
        let _this = this
        let qs = require('qs');
        this.$axios.post("http://yogahome.top/yujia/user/findCoachByDistant", qs.stringify(obj), {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }

        }).then(function (response) {
          _this.dropdownActive = false;
          for (let i = 0; i < response.data.data.length; i++) {

            if (!(response.data.data[i].major instanceof Array) && response.data.data[i].major) {
              response.data.data[i].major = response.data.data[i].major.split('|');
            }
          }
          //_this.newMost = _this.sliceArr(response.data.data, 30)
          //_this.most = _this.newMost[0];
          _this.most = response.data.data

        }).catch(function (error) {
          console.log(error);
        });
      },
      //			按距离排序
      range() {
        let obj = {
          //请求的参数
          coachid: 88891,
          code: 1,
          lng: this.lng,
          lat: this.lat,

        };
        let _this = this
        let qs = require('qs');
        this.$axios.post("http://yogahome.top/yujia/user/findCoachInDistantByDis", qs.stringify(obj), {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }

        }).then(function (response) {
          _this.dropdownActive = false;
          for (let i = 0; i < response.data.data.length; i++) {

            if (!(response.data.data[i].major instanceof Array) && response.data.data[i].major) {
              response.data.data[i].major = response.data.data[i].major.split('|');
            }
          }
          //_this.newMost = _this.sliceArr(response.data.data, 30)
          //_this.most = _this.newMost[0];
          _this.most = response.data.data

        }).catch(function (error) {
          console.log(error);
        });
      },
      //			按星级排序
      star() {
        let obj = {
          //请求的参数
          coachid: 88891,
          code: 1,
          lng: this.lng,
          lat: this.lat,

        };
        let _this = this
        let qs = require('qs');
        this.$axios.post("http://yogahome.top/yujia/user/findCoachInDistantByStar", qs.stringify(obj), {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }

        }).then(function (response) {
          _this.dropdownActive = false;
          for (let i = 0; i < response.data.data.length; i++) {

            if (!(response.data.data[i].major instanceof Array) && response.data.data[i].major) {
              response.data.data[i].major = response.data.data[i].major.split('|');
            }
          }
          //_this.newMost = _this.sliceArr(response.data.data, 30)
          //_this.most = _this.newMost[0];
          _this.most = response.data.data

        }).catch(function (error) {
          console.log(error);
        });
      },
      //好评的排序
      opin() {
        let obj = {
          //请求的参数
          coachid: 88891,
          code: 1,
          lng: this.lng,
          lat: this.lat,

        };
        let _this = this
        let qs = require('qs');
        this.$axios.post("http://yogahome.top/yujia/user/findCoachInDistantByGoodEva", qs.stringify(obj), {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }

        }).then(function (response) {
          _this.dropdownActive = false;
          for (let i = 0; i < response.data.data.length; i++) {

            if (!(response.data.data[i].major instanceof Array) && response.data.data[i].major) {
              response.data.data[i].major = response.data.data[i].major.split('|');
            }
          }
          //_this.newMost = _this.sliceArr(response.data.data, 30)
          //_this.most = _this.newMost[0];
          _this.most = response.data.data

        }).catch(function (error) {
          console.log(error);
        });
      },
      //			按可预约排序
      Order() {
        let obj = {
          //请求的参数
          coachid: 88891,
          code: 1,
          lng: this.lng,
          lat: this.lat,

        };
        let _this = this
        let qs = require('qs');
        this.$axios.post("http://yogahome.top/yujia/user/findCoachInDistantByOpenDays", qs.stringify(obj), {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }

        }).then(function (response) {
          _this.dropdownActive = false;
          for (let i = 0; i < response.data.data.length; i++) {

            if (!(response.data.data[i].major instanceof Array) && response.data.data[i].major) {
              response.data.data[i].major = response.data.data[i].major.split('|');
            }
          }
          //_this.newMost = _this.sliceArr(response.data.data, 30)
          //_this.most = _this.newMost[0];
          _this.most = response.data.data

        }).catch(function (error) {
          console.log(error);
        });
      },
      //所有教练的排序
      coach() {
        let obj = {
          //请求的参数
          coachid: 88891,
          code: 1,
          lng: this.lng,
          lat: this.lat,

        };
        let _this = this
        let qs = require('qs');
        this.$axios.post("http://yogahome.top/yujia/user/findAllCoach", qs.stringify(obj), {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }

        }).then(function (response) {
          _this.dropdownActive = false;
          for (let i = 0; i < response.data.data.length; i++) {

            if (!(response.data.data[i].major instanceof Array) && response.data.data[i].major) {
              response.data.data[i].major = response.data.data[i].major.split('|');
            }
          }
          //_this.newMost = _this.sliceArr(response.data.data, 30)
          //_this.most = _this.newMost[0];
          _this.most = response.data.data

        }).catch(function (error) {
          console.log(error);
        });
      },
      //			查看教练首页
      coachPage() {
        let obj = {
          //请求的参数
          coachid: 88891,
          code: 1,

        };
        let _this = this
        let qs = require('qs');

        this.$axios.post("http://yogahome.top/yujia/coach/showCoachHomepage", qs.stringify(obj), {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }

        }).then(function (response) {
        }).catch(function (error) {
          console.log(error);
        });
      },
      aboutCoach(val) {
        this.$router.push({
          path: "/about_coach",
          query: {
            coachid: val.coachid
          }
        })
      },

      searchName(e) {
        this.searchInfoName = e.target.value;
      },

      //搜索教练
      searchCoach() {
        let obj = {
          //请求的参数
          coachid: 88891,
          code: 1,
          lng: this.lng,
          lat: this.lat,
          keyword: this.searchInfoName,
        };
        let _this = this
        let qs = require('qs');
        this.$axios.post("http://yogahome.top/yujia/user/findCoachByKeyword", qs.stringify(obj), {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then(function (response) {
          for (let i = 0; i < response.data.data.length; i++) {

            if (!(response.data.data[i].major instanceof Array) && response.data.data[i].major) {
              response.data.data[i].major = response.data.data[i].major.split('|');
            }
          }

          if (response.data.code == '1') {
            _this.most = response.data.data;
//						alert("搜索教练成功")
          } else {
            min.alert(response.data.message)
          }

        }).catch(function (error) {
          console.log(error);
        });
      },
      //			更改地址
      addressChange() {
        // let SESSION_ID = JSON.parse(window.sessionStorage.getItem('SESSION_ID'));
        // // var SESSION_ID=window.localStorage.getItem('sessionid')
        // // alert(SESSION_ID)
        // if(SESSION_ID == '') {
        // 	alert("请登录")
        // var select_address
        // 	this.$router.push({
        // 	path: "/forgot_password",
        // 	query: {
        // 		select_address:'select_address'
        // 	}
        // })
        // 	return;
        // let SESSION_ID = window.sessionStorage.getItem('SESSION_ID')
        var SESSION_ID = JSON.parse(window.localStorage.getItem('sessiond'))
        if (SESSION_ID == null) {
          mui.alert("请登录")
          // this.$router.push("/forgot_password")
          var about_coach
          this.$router.push({
            path: "/forgot_password",
            query: {
              select_address: 'select_address'
            }
          })
          return;
        }
        this.$router.push({
          path: "/select_address",
          query: {}
        })
        let obj = {
          sessionid: SESSION_ID.sessionid,
          userid: SESSION_ID.user.id,
          code: 1
        };
        let _this = this
        _this.sessionid = _this.$store.state.sessionid;
        let qs = require('qs');

        this.$axios.post("http://yogahome.top/yujia/user/findAllAddressByUser", qs.stringify(obj), {
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        }).then(function (response) {

        }).catch(function (error) {
          console.log(error);
        });
      },

    }
  }
</script>

<style scoped>
  @import "../../assets/css/about_class.css";
</style>
<style>
  .coach_xing .el-rate__item {
    width: 13px;
    margin-top: 2px;
  }

  .coach_xing .el-rate__icon {
    font-size: 12px;
  }

  .el-rate__icon .el-icon-star-on:before {
    width: 12px;
    height: 12px;
  }
</style>
